<html>
<head>
    <title>Live Update</title>
    <style type="text/css">
        body {
            margin: 30px;
            font-family: sans-serif;
            background: #fff;
        }
        h1 { background: #ccf; padding: 20px; }
        div.update { width: 100%; padding: 5px; }
        div.even { background: #ddd; }
        div.timestamp { float: left; font-weight: bold; }
        div.text { float: left; padding-left: 10px; }
        div.clear { clear: both; height: 1px; }
    </style>

    <script type="text/javascript" language="javascript"
            src="{{ STATIC_URL }}js/jquery.min.js"></script>

    <script type="text/javascript" language="javascript">
        function update() {
            update_holder = $("#update-holder");
            most_recent = update_holder.find("div:first");
            $.getJSON("/liveblog/updates-after/" + most_recent.attr('id') + "/",
                    function(data) {
                        cycle_class = most_recent.hasClass("odd")
                                ? "even" : "odd";
                        jQuery.each(data, function() {
                            update_holder.prepend('<div id="' + this.pk
                                    + '" class="update "' + cycle_class
                                    + '"><div class="timestamp">'
                                    + this.fields.timestamp
                                    + '</div><div class="text">'
                                    + this.fields.text
                                    + '</div><div class="clear"></div></div>'
                            );
                            cycle_class = (cycle_class == "odd")
                                    ? "even" : "odd";
                        });
                    }
            );

        }
        $(document).ready(function() {
            setInterval("update()", 60000);
        })
    </script>

</head>
<body>
<h1>Welcome to the Live Update!</h1>
<p>This site will automatically refresh itself every minute with new
    content -- please <b>do not</b> reload the page!</p>

{% if object_list %}
    <div id="update-holder">
        {% for object in object_list %}
            <div class="update {% cycle even,odd %}"id="{{ object.id }}">
                <div class="timestamp">
                    {{ object.timestamp|date:"Y-m-d H:i:s" }}
                </div>
                <div class="text">
                    {{ object.text|linebreaksbr }}
                </div>
                <div class="clear"></div>
            </div>
        {% endfor %}
    </div>
{% else %}
    <p>No updates yet -- please check back later!</p>
{% endif %}
</body>
</html>